import React, {Component} from 'react';
import {StyleSheet, Text, View, ScrollView, ActivityIndicator,TouchableWithoutFeedback,Alert } from 'react-native';
import { Image, Divider,ListItem, Icon,Button} from 'react-native-elements';
import Storage from './Storage';
import Ionicons from 'react-native-vector-icons/Ionicons';


export default class BookCase extends React.Component {
    static navigationOptions = ({ navigation }) => {
      return {
        title: '书架',
        headerRight: (
              <Button
                onPress = {navigation.getParam('refreshBooks')}
                icon={
                  <Ionicons
                  name="ios-refresh"
                  size={25}
                  color="#2089dc"
                />
                }
                type='clear'
              />
        ),
      };
    };

    state = {books:[],loaded:false,showRemove:false}


    componentDidMount(){
        this.props.navigation.setParams({refreshBooks:this.books})
        this.books()
    }

    componentWillUnmount(){

    }

    toggleRemove=()=>{
      this.setState(state=>({
        showRemove:!state.showRemove
      }))
    }

    books=()=>{
        this.setState({loaded:false})
        Storage.getAllKeys().then(keys=>{
            Storage.multiGet(keys).then(data=>{
                let books=[]
                data.map((item,i)=>{
                    books.push(JSON.parse(item[1]))
                })
                books=Storage.chunkArray(books,3)
                // console.warn(books)
                this.setState({books:books,loaded:true})
            })
        })  
    }

    delbook=(href)=>{
      Storage.removeData(href).then(()=>{
        this.books()
      })
    }

    readNovel=(item)=>{
      console.warn(item)
    }

    render() {
        let {loaded,books,showRemove} = this.state
      return (
        <View>
          {loaded?
            <View style={{flex:1}}>
                {
                    books.map((items, i) => (
                         <View key={`${i}`} style={{height:152,borderBottomWidth:1,borderBottomColor:'silver',padding:15}}>
                          <View style={{ flex: 1, justifyContent: "space-around", alignItems: "center", flexDirection: 'row' }}>
                            {
                              items.map((item)=>(
                                <TouchableWithoutFeedback key={item.href} onLongPress={this.toggleRemove}>
                                  <View style={{position:'relative'}} >
                                      <Image source={{uri:item.cover}} style={{width:90,height:122,}}/>
                                      { showRemove ?
                                      <Ionicons size={25} onPress={()=>{this.delbook(item.href)}} name='ios-remove-circle' style={styles.removebook}/>
                                      :
                                      <Ionicons size={25} onPress={() => this.props.navigation.navigate('Detail',{
                                        url:item.href,
                                        title:item.title
                                    })} name='ios-eye' style={styles.viewbook}/>
                                      }
                                  </View>
                                </TouchableWithoutFeedback>  
                              ))
                            }
                          </View>
                        </View>
                    ))
                }
            </View>
          :
                <View style={styles.horizontal}>
                    <ActivityIndicator size="small" color="#00ff00" />
                    <Text>Loading...</Text>
                </View>
            }
        </View>
      );
    }
  }


  const styles = StyleSheet.create({
    container: {
      flex: 1, justifyContent: "space-between",flexDirection: 'row'
    },
    removebook:{
      position:'absolute',
      right:-10,
      top:-8,
      color:'red',
    },
    viewbook:{
      position:'absolute',
      right:-10,
      top:-8,
      color:'green',
    },
    horizontal: {
      flex: 1,
      justifyContent: 'center',
      alignItems: "center",
      flexDirection: 'column',
      padding: 10
    },
    thumbnail: {
      width: 53,
      height: 81
    },
  });